/* 引入Google字体，改进文字显示效果 */
@import url('https://fonts.googleapis.com/css?family=Open+Sans:400,700&display=swap');

/* 对body进行基本样式设置 */
body {
  font-family: 'Open Sans', sans-serif; /* 设置字体 */
  margin: 0; /* 移除默认的外边距 */
  padding: 0; /* 移除默认的内边距 */
  background-color: #f4f4f4; /* 设置背景颜色 */
}

/* 对header进行样式设置 */
header {
  background-color: #FF6F61; /* 设置header的背景颜色 */
  color: white; /* 设置文字颜色 */
  padding: 10px 0; /* 设置内边距 */
}

/* 对导航菜单进行样式设置 */
.nav ul {
  list-style: none; /* 移除列表项的标记（如项目符号） */
  margin: 0; /* 移除外边距 */
  padding: 0; /* 移除内边距 */
  display: flex; /* 使用弹性盒模型布局 */
  justify-content: center; /* 水平居中子元素 */
  align-items: center; /* 垂直居中子元素 */
}

.nav ul li {
  margin: 0 15px; /* 在项目之间设置外边距c */
}

.nav ul li a {
  text-decoration: none; /* 移除链接下划线 */
  color: white; /* 设置链接文字颜色 */
  padding: 5px; /* 设置链接内边距 */
  border-radius: 5px; /* 设置链接圆角边框 */
  transition: background-color 0.3s; /* 添加背景颜色过渡效果 */
}

.nav ul li a:hover {
  background-color: #FFD97D; /* 设置鼠标悬停时的背景颜色 */
}